<template>
	<view class="content">
		<view class="top-bg">
			<view class="text">总订单数：{{total}}条</view>
			<view class="text">已完成订单：{{beenOver}}条</view>
		</view>

		<view class="time-area">
			<view class="time-item">
				<view class="time-title" style="padding-left: 30upx;">开始时间</view>
				<view class="time-chose" :class="start ? 'time-chose-active':''" @tap="choseTime(1)">{{time1}}</view>
			</view>
			<view class="time-item">
				<view class="time-title" style="padding-right: 30upx;">结束时间</view>
				<view class="time-chose time-right" :class="end ? 'time-chose-active':''" @tap="choseTime(2)">{{time2}}</view>
			</view>
		</view>
		<view class="search-bottom" @tap="goList()">搜索</view>
		<view class="time-selected" @tap="closeThis()" v-if="end || start"></view>
		<dateTimePicker @confim="confimStart" ref="startTime"></dateTimePicker>
		<dateTimePicker @confim="confimEnd" ref="endTime"></dateTimePicker>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	import dateTimePicker from '@/components/timePicker-cc/index.vue'
	import util from '@/common/util.js'
	export default {
		components: {
			dateTimePicker
		},
		data() {
			return {
				titleColor: "#fff",
				apiUrl: config.apiHost,
				banners: [],
				imgUrl: config.ImageUrl,
				userId: uni.getStorageSync('userId'),
				QRCode: '',
				start: false,
				end: false,
				time1: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
				time2: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
				total: 0,
				beenOver: 0
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			choseTime(chose) {
				if (chose == 1) {
					this.start = true
					this.$refs['startTime'].open()
				} else {
					this.end = true
					this.$refs['endTime'].open()
				}

			},
			confimStart(e) {
				this.start = false
				this.end = false
				this.time1 = e
				console.log(this.time1)
			},
			confimEnd(e) {
				this.start = false
				this.end = false
				this.time2 = e
				console.log(this.time2)
			},
			closeThis() {
				this.start = false
				this.end = false
				this.$refs['startTime'].close()
				this.$refs['endTime'].close()
			},
			getInfo() {
				uni.request({
					url: this.apiUrl + '/api/order/selectOrderNum',
					method: 'GET',
					contentType: 'application/jason',
					data: {
						userId: this.userId
					},
					success: res => {
						console.log(res)
						if (res.data.code == 200) {
							this.total = res.data.data[0]
							this.beenOver = res.data.data[1]
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				});
			},
			goList() {
				this.time2 = this.time2.split('-')
				this.time2[2] = Number(this.time2[2]) + 1
				var subStr = new RegExp(',', 'ig'); //创建正则表达式对象,不区分大小写,全局查找
				this.time2 = this.time2.toString().replace(subStr, "-"); //把','替换为'-'
				uni.navigateTo({
					url: './orderManage?beginDate=' + this.time1 + '&endDate=' + this.time2 + '&role=1'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFF;
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		border-top: 1upx solid rgba(0, 0, 0, 0.07);
	}

	.dateSelect {
		border-top: 1upx solid rgba(0, 0, 0, 0.07);
	}

	.top-bg {
		width: 100%;
		height: 200upx;
		background-color: #FFF;
		box-shadow: 0 4upx 26upx 0 rgba(0, 0, 0, 0.07);
	}

	.time-selected {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.07);
		display: flex;
		position: absolute;
		z-index: 10;
		top: 0;
	}

	.text {
		width: 100%;
		height: 40upx;
		padding-top: 40upx;
		padding-bottom: 30upx;
		text-align: center;
	}

	.time-area {
		width: 100%;
		height: 362upx;
		display: flex;
		flex-wrap: wrap;
	}

	.time-item {
		width: 50%;
		height: 100%;
	}

	.time-title {
		margin-top: 66upx;
		height: 40upx;
		text-align: center;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(34, 34, 34, 1);
		line-height: 40upx;
	}

	.time-chose {
		margin: 14upx 6upx 0upx 30upx;
		height: 80upx;
		line-height: 80upx;
		padding-left: 32upx;
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(34, 34, 34, 1);
		border-radius: 10upx;
		border: 2upx solid rgba(215, 215, 215, 1);
	}

	.time-right {
		margin: 14upx 30upx 0upx 6upx !important;
	}

	.time-chose-active {
		border: 1px solid rgba(250, 114, 58, 1) !important;
	}

	.search-bottom {
		margin: 0 30upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		background: rgba(250, 114, 58, 1);
		border-radius: 12upx;
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
</style>
